<template>
    <div id="body-padding">
        <p id="p">找回密码</p>
        <div class="inp">
            <input 
                type="text" 
                placeholder="登录邮箱"
                v-model="email"
            >
            <span class="fa fa-envelope user a"></span>
        </div>
        <div class="inp">
            <input type="text" placeholder="验证码" v-model="cap">
            <span class="fa fa-photo user a"></span>
        </div>
        <div id="img">
            <img :src="captcha" alt="">
            <button @click="captClick">看不清，换一张？</button>
        </div>
        <button id="btn" @click="btnClick">找回密码</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
            email:'',
            cap:"",
            captcha:"http://localhost:3000/captcha",
        }
    },
    methods:{
        emailInput(){
            console.log(this.email);
        },
        captClick(){
            this.captcha = "http://localhost:3000/captcha?"+Math.random();
        },
        btnClick(){
            // console.log(this.cap.toLocaleUpperCase())
            var reg = /^\w{1,}@\w{1,}\.\w{1,5}$/;
            if(!reg.test(this.email)){
                this.layer.msg("邮箱格式错误");
                return;
            }
            if(this.cap.length!=4){
                this.layer.msg("验证码格式错误");
                return;
            }

            var data = {
                email:this.email,
                captcha:this.cap,
            };
            this.http.get("/users/captcha",{params:data})
            .then(res=>{
                this.layer.alert(res.data.msg)
                this.captcha = "http://localhost:3000/captcha?"+Math.random();
                if(!res.data.err){ 
                   this.email="";    
                   this.cap="";    
                }
            })

        },
    }
}
</script>

<style scoped>
.inp{
    margin: 4px;
    margin-bottom: 10px;
    position: relative;
    border: solid 1px #999;
    border-radius: 3px;
    padding: 1px 8px;
    padding-left: 40px;
    
}
.inp input{
    outline:none;
    width: 100%;
    height: 32px;
    border: none;
    font-size: 14px;
}
.inp:hover{
    border: solid 1px #2D93E8;
}
.a{
    position: absolute;
    top: 8px;
    left: 12px;
    color: #777;
}
#img{
    padding: 5px;
}
#img img{
    width: 40%;
    height: 36px;
    border: solid 1px #ccc;
}
#img button{
    border: none;
    padding: 2px 8px;
    background-color: white;
    text-decoration: underline;
    color: blue;
}
</style>